<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="common.css">
	<title>我的投票</title>
	<script src="lib/zepto.js"></script>
	<script src="common.js"></script>
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style>

body { padding-left:0; padding-right:0; }

.tab {
	display:table;
	width:90%;
	min-width:16em;
	max-width: 27em;
	table-layout: fixed;
	padding:0;
	margin: 0.6em auto;
	background:#fff;
	border-radius:0.8em;
	text-align:center;
	overflow:hidden;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
	z-index: 2;
	transition: background 0.4s;
}
	.tab a {
		display:table-cell;
		padding:1em 0.2em 0.8em 0.2em;
		color:#EB6942;
		border-bottom: 4px transparent solid;
		text-align:center;
		box-sizing:border-box;
		text-decoration:none;
	}
	.tab a.active {background:#FFFBD2; border-bottom-color:#EB6841;}
	.tab a:active {background:#F6F6F6;}
	.tab a:before {
		display:block;
		width:; height: 3em;
		background-size: 3.4em;
		background-position:center;
		background-repeat:no-repeat;
		content:' ';
		margin-bottom: 0.4em;
	}
	.my-join:before  {background-image:url(img/my-join.png);}
	.my-create:before{background-image:url(img/my-create.png);}
	.new-vote:before{background-image:url(img/new-vote.svg); background-size:2.2em !important;}

.tab.no-space {
	position: absolute;
}
.tab.space-fill {
	visibility: hidden;
}

.tab.fixed {
	position: fixed;
	margin: 0;
	top:0;
	width:100%;
	max-width: 100%;
	margin: auto;
	border-radius: 0;
	background: rgba(255,255,255, 0.8);
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
}
	.tab.fixed a {
		padding-top: 0.2em;
		padding-bottom: 0.1em;
	}
	.tab.fixed a:before {
		background-size: 2.6em;
		height: 2em;
		margin: 0;
	}
	.tab.fixed .new-vote:before{background-size:1.6em !important;}

.poll-list {
	list-style:none;
	background:#EFEFEF;
	padding:0;
}

.poll-list li {
	width:100%;
	padding:1em 56px 1em 1em;
	margin:1em 0;
	background:#fff;
	position:relative;
	box-sizing:border-box;
}

.poll-status {
	position:absolute;
	top:0;
	right:16px;
}

.title {
	display:block;
	color:#EB6942;
	font-size:1.1em;
	line-height:1em;
	margin-bottom:10px;
	font-weight:300;
}

.description {
	display:block;
	font-size:1em;
	color:#6C6C6C;
	line-height:1.2em;
	/*margin-left:3em;*/
}
.info-bar{
	padding: 26px 0 0 0;
}
.time, .people{
	display:block;
	color:#F58A6A;
	font-size:0.8em;
	line-height:1.7em;
}

.avatar-wrap {
	display:block;
	float:left;
	width:2.6em; height:2.6em;
	border-radius:50%;
	background:#E0E0E0 url(img/default-avatar.png) center center no-repeat;
	background-size: 100% 100%;
	margin:0 1em 0 0;
	overflow:hidden;
}
	.avatar {
		display:block;
		width:2.6em; height:2.6em;
		border-radius:50%;
		border: none;
	}


.view-result {
	display:block;
	position:absolute;
	top:0; right:0; left:0; bottom:0;
	height:100%;line-height:1em;
	font-size:0.9em;
	color:transparent;
	text-decoration:none;
	background:#F6F6F6 url(img/icon/search.svg);
	background-size: 3em 3em;
	background-position:center center;
	background-repeat:no-repeat;
	opacity:0;
}
	.view-result:active {
		opacity:0.7;
	}

#model,#model2 {display:none;}

/** ifrane **/
#resultFrame {
	position:fixed;
	border:none;
	width:100%; height:100%;
	top:0;left:0;right:0;bottom:0;
	z-index:999;
	padding:0;
	margin:0;
	opacity:1;
	box-shadow: 0 0 0 99em rgba(0,0,0,0.6), 0 0 5px rgba(0,0,0,0.8);
	transition: all 0.5s ;
	will-change: transform, box-shadow;
}
#resultFrame.hidden {
	transform: translateX(100%);
	box-shadow: 0 0 0 99em rgba(0,0,0,0);
}

.closeFrame {
	position: absolute;
	top:0.6em; left:0;
	border-radius:0 9em 9em 0;
	width:3em; height:3em;
	background-color:#EB6942;
	background-image:url(img/close-frame-btn.png);
	background-size: 2.8em 2.8em;
	background-position:center center;
	background-repeat:no-repeat;
	box-shadow: 0 0 8px 0 #F9CC8A;
	z-index:1;
}

#resultFrame iframe {
	position:absolute;
	border:none;
	width:100%; height:100%;
	top:0;left:0;right:0;bottom:0;
	padding:0;
	margin:0;
}



</style>

</head>
<body>

<div class="head-img"><img src="img/my-head.png"/></div>
<h3>我的投票</h3>

<div class="tab" id="tab">
	<a class="my-create" id="my-create-tab" onclick="switchList('create');">我创建的</a>
	<a class="my-join" id="my-join-tab" onclick="switchList('join');">我参与的</a>
	<a class="new-vote" id="new-vote-tab" href="new.htm">新建投票</a>
</div>

<!-- 粘性布局的占位符，保持原有tab处的空间，阻止下面的内容上移 -->
<div class="tab no-space space-fill" id="tab-space">
	<a></a>
</div>

<div class="main">
	<ul class="poll-list" id="mypoll">
	<h4 style="display:none;">我发起的</h4>
	<li id="model">
		<div class="poll-status"></div>
		<span class="title">...</span>
		<span class="description">...</span>
		<div class="info-bar">
			<a class="view-result" href="result.htm#">查看结果</a>
			<div class="avatar-wrap"><img class="avatar" src=""></img></div>
			<span class="people"></span>
			<time class="time"></time>
		</div>
	</li>
	</ul>

	<ul class="poll-list" id="myjoin">
	<h4 style="display:none;">我参与的</h4>
	<li id="model2">
		<div class="poll-status"></div>
		<span class="title">...</span>
		<span class="description">...</span>
		<div class="info-bar">
			<a class="view-result" href="result.htm#">查看结果</a>
			<div class="avatar-wrap"><img class="avatar" src=""></img></div>
			<span class="people"></span>
			<time class="time"></time>
		</div>
	</li>
	</ul>
</div>

<div id="resultFrame" class="hidden">
	<div class="closeFrame" onclick="hideFrame();history.back();" style="visibility:hidden;"></div>
	<iframe src="result.htm"></iframe>
</div>


<script>

function newItem(data,ol){
	var moel = document.getElementById('model').cloneNode(true);
	var tt = moel.getElementsByClassName('title');
	moel.getElementsByClassName('title')[0].innerHTML = data.theme;
	moel.getElementsByClassName('description')[0].innerHTML = data['theme_description'];
	moel.getElementsByClassName('time')[0].innerHTML = getTime(data['launch_time']);
	moel.getElementsByClassName('poll-status')[0].className += data['is_over']?' dark':' light';
	var nickname = (ol=='create')?'我':(data['nickname'] || '匿名')
	moel.getElementsByClassName('people')[0].innerHTML = nickname;
	moel.getElementsByClassName('avatar')[0].src = data['launcher_img'] || 'img/default-avatar.png';
	moel.getElementsByClassName('view-result')[0].href += data['room_id']+'@';
	moel.getElementsByClassName('view-result')[0].addEventListener ('click', viewHrefClick);
	moel.id = '';
	return moel;
}

function setItem(data,ol){
	var tempContainer = document.createDocumentFragment();
	for(var i=0;i<data.length;i++){
		var tempItem = newItem(data[i], ol);
		tempContainer.appendChild(tempItem);
	}
	var lookUpTable = {'create':'mypoll','join':'myjoin'};
	var pollList = document.getElementById(lookUpTable[ol]);
	pollList.appendChild(tempContainer);
}

function getCallback(data){
	if(data.error){
		alert('Here are some errors!\n-' + data.error);
		return false;
	}
	//var data = JSON.parse(data);
	if(data['my_launch']){
		setItem(data['my_launch'],'create');
	}else if(data['my_votes']){
		setItem(data['my_votes'],'join');
	}
	loadingBox.hide();
}


/******* IFtame ******/
function viewHrefClick(e){
	e.preventDefault();
	showFrame(this.href);
}

function hashWatcher(){
	if(location.hash.search('view_result') == -1){
		hideFrame();
	}else{
		//showFrame();
	}
}

function showFrame(url){
	var fel = document.getElementById('resultFrame');
	//First, set href value
	frameObj = fel.getElementsByTagName('iframe')[0];
	frameObj.contentWindow.location.replace(url);
	//Then, show element
	fel.className = '';
	location.hash = 'view_result_id_'+ url.substring(url.lastIndexOf('#')+1);
	disableBodyScroll();
}

function hideFrame(){
	var fel = document.getElementById('resultFrame');
	fel.className = 'hidden';
	//location.hash = 'home';
	frameObj = fel.getElementsByTagName('iframe')[0];
	frameObj.contentWindow.closeRecords();
	enableBodyScroll();
}


/******* Misc *******/

var createListStatus = {
	'loaded':false,
}
var joinListStatus = {
	'loaded':false,
}

function switchList(ol){
	if(ol=='create'){
		$('#mypoll').show();
		$('#myjoin').hide();
		document.getElementById('my-create-tab').className += ' active'
		document.getElementById('my-join-tab').className  = 'my-join'
		if(!createListStatus.loaded){
			getJSON(API_URL+"?type=3",getCallback);
			loadingBox.show();
			createListStatus.loaded = true;
		}
	}else if(ol=='join'){
		$('#mypoll').hide();
		$('#myjoin').show();
		document.getElementById('my-join-tab').className += '  active'
		document.getElementById('my-create-tab').className  = 'my-create'
		if(!joinListStatus.loaded){
			getJSON(API_URL+"?type=4",getCallback);
			loadingBox.show();
			joinListStatus.loaded = true;
		}
	}
}
switchList('create');

window.onhashchange = window.onload = hashWatcher;


/******* Tab的粘性布局 ********/
(function(win){
	var box = document.getElementById('tab');
	var spa = document.getElementById('tab-space');
	//box = box.firstElementChild;
	var posFlag;
	var timeSet;
	window.addEventListener('scroll',function(){
		if(!timeSet){
			timeSet = window.setTimeout(function(){
				ons.call(this);
				timeSet = undefined;
			}, 200);
		}
	});
	function ons(){
		//包含占位符的操作
		if(window.scrollY >= ((posFlag === undefined)? box.offsetTop : posFlag)){
			if(posFlag === undefined){
				posFlag = box.offsetTop;
				console.log(posFlag);
			}
			box.classList.add('fixed');
			spa.classList.remove('no-space');
		}else{
			box.classList.remove('fixed');
			spa.classList.add('no-space');
			posFlag = undefined;
		}
	}
})(window);

/*
getCallback({"my_votes":[{"is_over":true,"theme":"asd","theme_description":"asdfa","launch_time":1477784392,"launcher_img":null,"nickname":null},{"is_over":true,"theme":"\u5fae\u8f6f\u5de5\u4f1a\u5c31\uff0c","theme_description":"\u65e0\u8272\u7684\u98ce\u683c\u548c\u5065\u5eb7\u7acb\u523b\u811a\u540e\u8ddf\u8303\u5fb7\u8428\u7684\u98ce\u683c\u4e0d\u4f1a\u90a3\u4e48","launch_time":1477787438,"launcher_img":null,"nickname":null},{"is_over":true,"theme":"\u5fae\u8f6f\u5de5\u4f1a\u5c31\uff0c","theme_description":"\u65e0\u8272\u7684\u98ce\u683c\u548c\u5065\u5eb7\u7acb\u523b\u811a\u540e\u8ddf\u8303\u5fb7\u8428\u7684\u98ce\u683c\u4e0d\u4f1a\u90a3\u4e48","launch_time":1477787467,"launcher_img":null,"nickname":null},{"is_over":true,"theme":"rxdtcfgvbhjnkml","theme_description":"txxtcyvubinml","launch_time":1477789634,"launcher_img":null,"nickname":null}]});
***/

</script>

<!-- CNZZ Status -->
<script src="http://s11.cnzz.com/stat.php?id=1261578070&web_id=1261578070" language="JavaScript"></script>


</body>
</html>
